Goals
Explain what testing is
Understand why we write tests
Write tests with Jasmine
Writing Tests
Why Test?
Manually testing software is boring
So we tend to not re-run things that “work”
And therefore don’t notice when they break
Tests often clarify expectations of a function
What should legal input/output be?
Tests are often a great way to understand what code does
It’s a core skill for professional devs
Jasmine
Jasmine is a popular JavaScript testing framework
We’ll use Jasmine for testing until we get to Python
We’ll see another framework, Jest, with Node and React
Running Tests in the Browser with Jasmine
<!doctype html>
<html>
<head>
<title>Taxes Tests</title>
<!-- include CSS for Jasmine -->
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.3.0/jasmine.css">/>
</head>
<body>
<!-- include JS for Jasmine -->
<script
type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.3.0/jasmine.js"></script>
<script
type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.3.0/jasmine-html.js"></script>
<script
type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.3.0/boot.js"></script>
<!-- include your JS & test file -->
<script src="taxes.js"></script>
<script src="taxes.test.js"></script>
</body>
</html>
HTML
Then open this HTML page in browser.
Writing tests with Jasmine
Write your functions that will be tested:
demo/taxes.js
function calculateTaxes(income) {
if (income > 30000) {
return income * 0.25;
} else {
return income * 0.15;
}
}
console.log(calculateTaxes(500))
JavaScript
Write a test file:
demo/taxes.test.js
it('should calculate lower-bracket taxes', function () {
expect(calculateTaxes(10000)).toEqual(1500);
expect(calculateTaxes(20000)).toEqual(3000);
});
it('should calculate higher-bracket taxes', function () {
expect(calculateTaxes(50000)).toEqual(12500);
expect(calculateTaxes(80000)).toEqual(20000);
});
JavaScript
Let’s break that down
demo/taxes.test.js
it('should calculate lower-bracket taxes', function () {
expect(calculateTaxes(10000)).toEqual(1500);
expect(calculateTaxes(20000)).toEqual(3000);
});
it('should calculate higher-bracket taxes', function () {
expect(calculateTaxes(50000)).toEqual(12500);
expect(calculateTaxes(80000)).toEqual(20000);
});
JavaScript
Test cases are functions passed to it(...)
First argument become test case name (shown by Jasmine)
demo/taxes.test.js
it('should calculate lower-bracket taxes', function () {
expect(calculateTaxes(10000)).toEqual(1500);
expect(calculateTaxes(20000)).toEqual(3000);
});
it('should calculate higher-bracket taxes', function () {
expect(calculateTaxes(50000)).toEqual(12500);
expect(calculateTaxes(80000)).toEqual(20000);
});
JavaScript
Test cases can contain any normal code plus “expectations”
Format is expect(someValue).someMatcher(...)
Matchers
.toEqual(obj)Has the same value (eg, different lists with same values match).toBe(obj)Is the same object (eg, different lists with same items don’t).toContain(obj)Does object/array contain this item?.not.Add before matcher to invert (eg expect(...).not.toEqual(7))
What To Test
Test every function in at least one way
Think about “edges”
What if the list were empty?
What about non-integer numbers?
What if the file can’t be found?
Is the first case/last case handled differently?
Testable Code
Write code that is easier to test!
More functions & smaller functions: easier to test (& debug!)
Don’t mix logic & UI in a function
function playTicTacToe() {
// ...
let winner = checkForWinner();
}
function checkForWinner() {
// code for checking board here...
if (winner) {
alert(winner + " wins!");
}
return winner;
}
JavaScript
function playTicTacToe() {
// ...
let winner = checkForWinner();
if (winner) {
announceWinner(winner);
}
}
function checkForWinner() {
// code for checking board here...
return winner;
}
function announceWinner(winner) {
alert(winner + " wins!");
}
JavaScript

